import React, { useState } from 'react';
import s from './style.module.css';
import Chart1 from './echartBox/chart1';
import Chart2 from './echartBox/chart2';
import Icon from '@/assets/icon';
import TableBox from './table';
import { getWarnWeek, getWarnDay } from '~/API';

export default function overview() {
  const [week, setWeek] = useState({});
  const [day, setDay] = useState({});
  const getData = async () => {
    const res1 = await getWarnWeek();
    const res2 = await getWarnDay();
    setWeek(res1.data.data);
    setDay(res2.data.data);
  };
  React.useMemo(() => {
    getData();
  }, []);
  return (
    <div className={s.overview}>
      <div className={s.main}>
        <span className={s.title}>告警数量统计</span>
        <div className={s.mainNum}>
          <div>
            <div>
              <Icon active="alert1" />
            </div>
            <div>
              <span>总告警数</span>
              <span className={s.alertNum}>{week.warnings_total}</span>
            </div>
          </div>
          <div>
            <div>
              <Icon active="alert2" />
            </div>
            <div>
              <span>近一周告警数</span>
              <span className={s.alertNum}>{week.total}</span>
            </div>
          </div>
          <div>
            <div>
              <Icon active="alert3" />
            </div>
            <div>
              <span>今日告警数</span>
              <span className={s.alertNum}>{day.total}</span>
            </div>
          </div>
        </div>
        <div className={s.chartBox}>
          {week.trend && <Chart1 data={week.trend} />}
          {day.total > -1 && <Chart2 data={day} />}
        </div>
      </div>
      <div className={s.main}>
        <span className={s.title}>告警详情</span>
        <TableBox />
      </div>
    </div>
  );
}
